<script setup>
import { ref, watch, onBeforeUnmount, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import CyPlayerCls from '@/utils/cy.player'

import Icon from '@/components/Icon.vue'
let cyPlayer = new CyPlayerCls()

const route = useRoute()
const routers = useRouter()
const active = ref(route.fullPath)
const useDahuaVideo = window.dahuaVideo
const refMenu = ref(null)

var child = localStorage.getItem('menu_child')
try {
	var children = JSON.parse(child)
} catch {
	var children = []
}
var menu = ref(children)

function back() {
	localStorage.setItem('menu_child', localStorage.getItem('menu_child_reservePlan'))
	routers.replace('/system/emergency')
}

const handleSelectMenu = (url) => {
	if (!useDahuaVideo && url == '/resource/video/real') {
		const data = {
			server_ip: localStorage.getItem('serverIp'),
			server_port: localStorage.getItem('serverPort'),
			uid: localStorage.getItem('uid')
		}
		cyPlayer.openLiveVideo(data)
	} else {
		routers.push(url)
	}
}

watch(
	() => route.matched,
	(newValue, oldValue) => {
		// const matched = newValue.at(-1)
		const matched = route.fullPath
		if (matched == '/position/leave') {
			const menus = JSON.parse(localStorage.getItem('navMenus'))
			child = menus.find((item) => item.id === 100) || {} // 添加兜底空数组
			menu.value = child.children || []
			localStorage.setItem('menu_child', JSON.stringify(menu.value))
		} else {
			child = localStorage.getItem('menu_child')
			try {
				var children = JSON.parse(child)
			} catch {
				var children = []
			}
			menu.value = children
		}
		// child = localStorage.getItem('menu_child')
		// try {
		// 	var children = JSON.parse(child)
		// } catch {
		// 	var children = []
		// }
		// menu.value = children
		nextTick(() => {
			active.value = matched
		})
	}
)
onBeforeUnmount(() => {
	cyPlayer = null
})
</script>

<template>
	<el-container class="layout-left-container">
		<el-aside style="width:240px;box-sizing: border-box;">
			<el-menu ref="refMenu" active-text-color="rgb(0, 148, 255)" :default-active="$route.fullPath"
				@select="handleSelectMenu">
				<template v-for="(item, i) in menu" :key="i">
					<el-sub-menu v-if="item.children && item.children.length > 0" :index="i + ''">
						<template #title>
							<Icon :code="item.icon" :size="14" />
							<p>{{ item.name }}</p>
						</template>
						<el-menu-item v-for="(it, j) in item.children" :key="j" :index="it.url"
							:class="{ 'is-active': it.url == active }">
							{{ it.name }}
						</el-menu-item>
					</el-sub-menu>
					<el-menu-item v-else :index="item.url" :class="{ 'is-active': item.url == active }">
						<template #title>
							<Icon :code="item.icon" :size="14" />
							<p>{{ item.name }}</p>
						</template>
					</el-menu-item>
				</template>
			</el-menu>
		</el-aside>
		<el-main style="padding:10px;box-sizing: border-box;">
			<router-view></router-view>
		</el-main>
	</el-container>
</template>
<style lang="scss" scoped>
.layout-left-container {
	height: 100%;
}

.el-header {
	height: 40px;
	display: flex;
	align-items: center;

	.ArrowLeftIcon {
		width: 30px;
		height: 30px;
	}
}

.el-main {
	padding: 0;
	height: 100%;
}

.el-aside {
	// height: calc(100vh - 64px);
	height: 100%;
	overflow-y: scroll;
}

::-webkit-scrollbar {
	width: 2px;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
}

.el-menu {
	height: 100%;
	background-color: rgb(255, 255, 255);
}

.el-menu-item,
.el-sub-menu {
	background-color: rgb(255, 255, 255);
	// height: 40px;
	line-height: 40px;

	.menu-img {
		width: 15px;
		height: 15px;
	}

	p {
		margin: 0 10px;
	}

	span {
		color: rgb(64, 108, 224);
	}
}

.el-sub-menu {
	box-sizing: border-box;

	.el-menu-item {
		// padding:0 !important;
		width: 100%;
		margin-top: 2px;
	}
}


.el-menu-item:hover {
	// background-color: rgba(0, 148, 255, 0.12);
	background-color: rgb(243, 244, 247);
	border-radius: 8px;
}

.el-menu-item.is-active {
	// background-color: rgb(196, 198, 200);
	border-radius: 8px;
	background-color: rgba(0, 148, 255, 0.12);
	font-weight: bold;
}

.el-menu-item {
	height: 40px;
}
</style>
<style>
.el-sub-menu__title {
	height: 40px;
	line-height: 40px;
}
</style>